<template>
    <div id="huge_box">
        <div id="head">
            <van-nav-bar title="商品列表" left-text="返回" left-arrow @click-left="onClickLeft"/>
        </div>
    
        <van-empty v-show="carts.length == 0" description="购物车目前还没有商品" image="https://img.yzcdn.cn/vant/custom-empty-image.png">
            <van-button round type="danger" class="bottom-button" @click="gotoClassify">
                去购物
            </van-button>
        </van-empty>

        <div v-for="(item, index) in carts" :key="item">
            <div>
                <!-- <van-checkbox-group > -->
                    <van-row style="background-color: white;">
                        <van-col span="2" style="margin-top: 35px;">
                            <van-checkbox v-model="item.checked" :name="item" @click=" getTotal(),isAllChecked()"></van-checkbox>
                        </van-col>

                        <van-col span="22">
                            <van-swipe-cell>
                                <van-card :price="item.price" desc="描述信息" :title="item.name" :thumb="item.picture"
                                    class="goods-card">
                                    <template #num>
                                        <van-stepper v-model="item.count" theme="round" button-size="22" disable-input
                                            @change="getTotal()" />
                                    </template>
                                </van-card>
                                <template #right>
                                    <van-button @click="delCart(item, index)" square text="删除" type="danger"
                                        class="delete-button" />
                                </template>
                            </van-swipe-cell>
                        </van-col>
                    </van-row>
                <!-- </van-checkbox-group> -->
            </div>

        </div>
        <!-- <div v-show="carts.length">
            <p>总价:{{ totalPrice }}</p>
        </div>
        <van-button v-show="carts.length" v-model="checkAll" type="primary" @click="check_All(), getTotal()">全选</van-button> -->
        <van-submit-bar v-show="carData.shopcar.length !== 0" :price="totalPrice" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checkAll" @click="check_All(),getTotal()">全选</van-checkbox>
        </van-submit-bar>
    </div>
    
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { onMounted } from 'vue';
import { useCartData } from '../store/index.js';
import { showToast } from 'vant';
const carData = useCartData();
const router = useRouter()
const carts = ref([])
var totalPrice = ref(0)
var checkAll = ref(true)


const onSubmit = () => {
    carts.value = []
    carData.shopcar = []
  showToast('结算成功')
}
const gotoClassify = () => {
    router.push({
        path: '/fenlei'
    })
}
onMounted(() => {
    carts.value = carData.shopcar;
    isAllChecked()
    getTotal()

})

const onClickLeft = () => {
    router.push({
        path:'/fenlei'
    })
}

//多选
// const selectOne = () => {
//     console.log(carts.value, 'carts');
//     if (result.value.length === carts.value.length) {
//         checkAll = true;
//         carts.value.selected = true
//     } else {
//         checkAll = false;
//         carts.value.selected = false;
//     }
//     console.log(result.value, 'result');


// }

const isAllChecked = ()=>{
    var findIndex = carts.value.findIndex(item=>item.checked==false)
    checkAll.value=findIndex===-1?true:false;

    
}
//全选
const check_All = () => {
    carts.value.map(item=>{
        item.checked = checkAll.value
    })
    
    // if (checkAll) {
    //     result.value = carts.value
    //     checkAll = 0;
    // } else {
    //     result.value = []
    //     checkAll = 1;
    // }
    // console.log(result.value);

}

//单个删除
const delCart = (item, index) => {

    carts.value.splice(index, 1);

}




//计算总价格
const getTotal = () => {
    console.log(22222);

    var totalPrice1 = 0;
    console.log(carts.value,'112111');
    for (let i = 0; i < carts.value.length; i++) {
        if(carts.value[i].checked){
            totalPrice1 += carts.value[i].price * carts.value[i].count;

        }
    }
    
    // console.log(totalPrice1,'11111');
    
    totalPrice.value = totalPrice1*100
    

    return totalPrice1;
}



</script>

<style scoped>
.settlement {
    margin-bottom: -0.1rem;
  }
.bottom-button {
    width: 180px;
    height: 40px;
}

.goods-card {
    background-color: white;
}

.delete-button {
    height: 100%;
}

#huge_box {
    height: 100%;
    
}
</style>